<template>
  <div class="category">
      <el-row :gutter="20">
        <el-col :span="3" class="col-left">
          <el-card>
            <router-link @click.native="change(0)" :to="{ path: '/category'}" tag='li'>全部</router-link>
            <router-link @click.native="change(item.cateId)" :class="{last:index == (category.length - 1)}" v-for="(item, index) in category" :key='index' :to="{ path: '/category', query: {id: item.cateId}}" tag='li'>{{item.cateName}}</router-link>
          </el-card>
        </el-col>
        <el-col :span="21" class="col-right">
          <ArticleScrollPage v-bind="params"></ArticleScrollPage>
        </el-col>
      </el-row>      
  </div>
</template>

<script>
import ArticleScrollPage from '../components/ArticlePage'
import {getCates} from '../api/cate';
let _this = this;
export default {
  name: 'Category',
  props:{
    id:{defult:0}
  },
  components:{
    ArticleScrollPage
  },
  data () {
    return {
      category:[],
      params: {
        query: {
          cate_id: 0
        }
      },
    }
  },
  mounted(){
    _this = this;
    _this.params.query.cate_id = _this.$route.query.id ? _this.$route.query.id : 0;
    _this.getCategory();
  },
  methods:{
    getCategory(){
      getCates().then(res => {
        _this.category = res.data
      })
    },
    change(id){
      // _this = this;
      _this.params.query.cate_id  = id;
    },
  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.category
  width 65%
  margin: 3% 0 5% 0
  text-align center
  h2
    line-height 100px
    color #555
    font-weight 500
  h5
    font-weight 500
    color #555
  .el-row
    width 100%
    .col-right
      margin-left 20%
      // min-height 600px
    .col-left
      // padding  20px 0
      // margin 20px 0
      background-color #ffffff
      position fixed
      li
        list-style none
        padding 5px 20px
        text-align center 
        cursor pointer
        display block
        color #555
        line-height 2
      .router-link-exact-active
        color #409eff
      
</style>
